@charset "utf-8";

//变量
//网页内容宽度
$WebWidth:1200px;
//盒子阴影
$boxshadow:0px 5px 8px #222222;

//重用代码块


//重用代码，box1:效果弹出
@mixin box1{
    width:360px;
    height: 50px;
    position: absolute;
    left: 0;
    bottom:-50px;
    background: #222222;
    opacity: 0.9;
    text-align: center;
    line-height: 50px;
    z-index: 5;
    &>a{
        color:#fff;
        font-size: 14px;  
    }
    //动画效果参数
    transition: bottom 0.5s;
}
//重用代码，商品分类2,3列
@mixin list{
    width:24%;
    height: 335px;
    float: left;
    border: 1px solid #CCCCCC;
    box-sizing: border-box;
    .main_list_text{
        padding: 10px;
        &>h5{
          height: 20px;
          line-height: 20px;
          font-size: 12px;  
        }
        &>p{
            height: 20px;
            line-height: 20px;
            font-size: 10px;
        }
    } 
}


//商品分类
.shop_class_con{
    width:$WebWidth;
    margin: 20px auto;
    //商品分类列表
    .shop_list{
        width:180px;
        float: left;
        //分类导航栏
        margin-top:2px;  
        box-shadow: 1px 1px 5px #b8b8b8;
        .shop_list_one{
            width:100%;
            text-decoration: none;
            box-sizing:border-box;
            
            //最强王者
            .shop_list_span{
                height: 0px;
                width:180px; 
                overflow: hidden;
                position: relative;
                &>span{
                    display: block;
                    height: 40px;
                    line-height: 40px;
                    width:180px;
                    &>a{
                        padding-left: 50px;
                        color:#eee;
                    }
                    
                }
                &>span:hover{
                    background: #EEE;
                    &>a{
                        color:#222222;
                    }
                    
                }
               transition:all 3s;
            }
            &:hover .shop_list_span{
                height: 200px;
            }
            
            
            i.iconfont{
                color: black;
                margin-left: 20px;
            }
            &:hover{
                height: 100%;
                transition: all 500ms;
                background: #252b38;
                i.iconfont{
                    color: white;
                }
                h3{
                    color: white;
                }
            }
            &:hover ul{
                display:none;
            }
            &>ul{
                display:none;
                width:100%;
            }
            
            &>h3{
                font-size: 16px;
                color: black;
                height: 40px;
                line-height: 40px;
                display: inline-block;
                font-family:fixedsys;
                margin-left: 10px;
                
            }
            &>ul>li{
                height: 40px;
                line-height: 40px;
                list-style-type: none;
                background: white;
                text-align: left;
                transition: all 300ms;
                &>a{
                    color:#222;
                    font-size: 14px;
                    text-spacing: 10px;
                    display: block;
                    width: 100%;
                    height: 100%;
                    padding-left: 50px;
                }
                &:hover{
                    background: #eee;
                }
                &:hover ul{
                    box-shadow: $boxshadow;
                }
            }
        }
    } 
    
    //商品分类展示
    .shop_show{
        width:1000px;
        float: right;
        
        //商品分类展示
        .shop_show_banner{
            width:100%;
            height:300px;
            box-sizing: border-box;
            &>img{
               width:1000px;
              
            }
        }
        //商品分类信息
        .shop_show_info{
            width:100%;
            height:100px;
            box-sizing: border-box;
            padding: 10px ;
            background: #eee;
            margin-top: 5px;
            margin-bottom: 5px;
            .info_one{
                width:100%;
                height: 25px;
                line-height: 25px;
                .info_title{
                    width:60px;
                    font-size: 14px;
                    color:#666;
                    display: inline-block;
                }
                .info_title_text{
                    display: inline-block;
                    padding-left: 20px;
                }
            }
        }
        //商品分类图片列表
        .shop_show_nav{
            width:100%;
            height:50px;
            background: #eee;
            line-height: 50px;
            vertical-align: top;
            .shop_sort{
                margin: 0 10px;
            }
        }
        //商品分类图片主要内容
        .shop_show_main{
            width:100%;
            //主要图片分类第一列
            .main_list{
                width:100%;
                height:340px;
                overflow: hidden;
                .main_list_text{
                    position: relative;
                    overflow: hidden;
                    //购买
                    .shop_buy{
                        width:60px;
                        height: 20px;
                        position: absolute;
                        right:0px;
                        bottom:5px;
                        display: none;
                    }  
                }
                .main_list_text:hover .shop_buy{
                        animation: run 1s; 
                        display: block;
                }
                
                
                img{
                    width:238px;
                     
                }
               
                //中间间距样式
                .main_margin{
                        margin-left:13px;
                    }
                //第一张图片
                .main_list_one{
                    @include list;  
                }
                .main_list_one:hover,.main_list_three:hover,.main_list_two:hover{
                    box-shadow: 0px 5px 5px #999;
                }
                .main_list_two,.main_list_three{
                    @include list; 
                }
            }
            
        }
        
    }
    @keyframes run{
        0%{
            transform: translateX(70px);
        }
        100%{
            transform: translateX(0px);
        }
    }
    @keyframes bigg{
        0%{
            transform: scale(1);
        }
        100%{
            transform: scale(1.2);
        }
    }
    
    
}
//其他商品
.shop_other{
    width:$WebWidth;
    margin: 0 auto 50px;
    //商品展示第一部分
    .shop_show_part1{
        width:$WebWidth;
        height: 500px;
        //商品展示第一部分标题
        .show_part1_title{
            width:$WebWidth;
            height: 100px;
            //标题
            .title_h1{
                text-align: center;
                width:300px;
                height: 80px;
                margin: 0 auto;
                padding-top: 30px;
                &>h1{
                    font-size: 32px;
                    font-family: "courier new";
                }
            }
        }   
        //商品展示第一部分图片
        .show_part1_img{
            width:$WebWidth;
            height: 400px; 
        }
    }
    
    //商品展示第二部分
    .shop_show_part2{
        width:$WebWidth;
        height: 300px;
        //商品展示第二部分标题
        .show_part2_title{
            width:$WebWidth;
            height: 20px;  
        }
        .show_part2_title:hover{
            box-shadow: $boxshadow;
        }
        //商品展示第二部分图片
        .show_part2_img{
            width:$WebWidth;
            height: 280px;
            background: #eee;
            .show_part2_1{
                width:360px;
                height: 280px;
                float: left;
                position: relative;
                overflow: hidden;
                z-index: 1;
                background: #222222;
                //边框动画
                //动画效果（图片变亮）
                
                &>img{
                    opacity: 0.7;
                }
                &>img:hover{
                    animation: bigg 1s;
                    animation-fill-mode: forwards;
                }
                .show_part_price{
                    @include box1;
                }
                .show_part_price2{
                    width:120px;
                    height: 50px;
                    position: absolute;
                    bottom: 0;
                    right:-120px;
                    opacity: 0.9;
                    text-align: center;
                    line-height: 50px;
                    z-index: 5;
                    &>a{
                        color:crimson;
                        font-size: 14px;  
                    }
                    //动画效果参数
                    transition: right 1s linear 0.5s;
                    
                }
                
            }
            .show_part2_1:hover .show_part_price2{
                    right:0px;
            }
            //动画效果
            .show_part2_1:hover .show_part_price{
                    bottom:0px;
                }
            //图片变亮
            .show_part2_1:hover img{
                opacity: 1;
            }
            //图片变亮
            .show_part2_1:hover{
                box-shadow: $boxshadow;
            }
            .show_part2_two{
                margin-left: 60px;
            }
            .show_part2_three{
                margin-left: 60px;
            }
        }   
    }
}

//回到顶部
.to_top{
    width:30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    box-shadow: 1px 1px 1px #535353;
    position: fixed;
    bottom: 50px;
    right:10px;
}




